<template>
	<div id="sharePush">
		<header>
			<div class="left-container">
				<img src="~@/assets/images/back2x.png" @click="backTo">
			</div>
			<div class="center-container">资产分析</div>
			<div class="right-container"></div>
		</header>
		<div class="orange">
			<div class="main">
				<div class="modal">
					<div class="content">
						<div class="score">
							<div class="empty"></div>
							<div class="number" v-text="message.defeat"></div>
							<div class="unit">分</div>
						</div>
						<div class="slogon" v-text="'— '+message.slogon+' —'"></div>
						<div class="quote">
							<div class="mark left">"</div>
							<div class="characters" v-html="time+'您赚了'+message.profit+'%，'+'<br/>'+'超过了'+message.defeat+'%资产相近的股民。'"></div>
							<div class="mark right">"</div>
						</div>
					</div>
					<div class="btn" @click="Share">分享</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import RemoteDAO from '@/common/remoteDAO'
	import ReturnError from '@/components/ReturnError'
	import ReturnEmpty from '@/components/ReturnEmpty'
	import constant from '@/common/constant'

	export default{
		data(){
			return {
				module:0,
				message:{
					profit:null,
					defeat:null,
					slogon:''
				},
				times:constant.TimeTabData,
				isActive:''
			}
		},
		computed:{
			time(){
				switch(this.$route.query.time){
					case 0:
					return '本月';
					break;

					case 1:
					return '近三个月';
					break;

					case 2:
					return '近半年';
					break;

					case 3:
					return '今年';
					break;

					case 4:
					return '2016年';
					break;

					default:
					let date=this.$route.query.time.split('');
					let year=date.slice(0,4).join('');
					let month=date.slice(4,6).join('');
					return year+'年'+month+'月';
				}
			}
		},
		created(){
			this.initEvent();
		},
		methods:{
			initEvent(){
				this.module=0
				let self=this;
				let obj={'recent':''};
				switch(this.$route.query.time){
					case 0:
					obj.recent='curmonth';
					break;

					case 1:
					obj.recent='quarter';
					break;

					case 2:
					obj.recent='halfyear';
					break;

					case 3:
					obj.recent='year';
					break;

					case 4:
					obj.recent='2016';
					break;

					default:
					obj.recent=this.$route.query.time;
				}
				RemoteDAO.callZL13100040(obj,self.ZL13100040);
			},
			ZL13100040(result){
				if(result.error=='1'){
					this.module=1
				}
				else{
					let data=result.data;
					let bigdata=JSON.parse(data).body[0].bigdata;
					let specData=JSON.parse(bigdata).hits.hits;
					if(specData.length==0){
						this.module=2
					}
					else{
						let profitRate=Math.round(JSON.parse(bigdata).hits.hits[0]._source.total_profit_total_rate*100);
					    this.message.defeat=Math.round(JSON.parse(bigdata).hits.hits[0]._source.profit_index);
					    if(this.message.defeat<=10){
					    	this.message.slogon='股市征程漫漫，继续加油！';
					    	this.isActive='purple'
					    }
					    else if(this.message.defeat<=30){
					    	this.message.slogon='股神的未来不是梦！';
					    	this.isActive='blue'
					    }
					    else if(this.message.defeat<=50){
					    	this.message.slogon='你离股神已经很接近了！';
					    	this.isActive='cyan'
					    }
					    else if(this.message.defeat<=70){
					    	this.message.slogon='厉害了我的天，请收下我的膝盖！';
					    	this.isActive='yellow'
					    }
					    else{
					    	this.message.slogon='股神，请接受我的膜拜！';
					    	this.isActive='orange'
					    }
					    this.message.profit=profitRate;
					}
				}
			},
			Share(){
				TDAPP.onEvent('002022','');
				TDAPP.send();
				let addParas='?&profit='+this.message.profit+'&defeat='+this.message.defeat+'&date='+this.$route.query.time;
				let obj={
					title:'资产分析，更懂自己！',
					content:'实时查，资产分析帮您轻松理财！',
					icon:'https://dl.app.gtja.com/web/zcfx/shareland.png',
					linkurl:'https://dl.app.gtja.com/web/zcfx/shareland/index.html'+addParas,
					moments:'all'
				};
				RemoteDAO.share(obj);
			},
			backTo(){
				this.$router.replace(this.$route.query.path);
			}
		},
		components:{
			'return-error':ReturnError,
			'return-empty':ReturnEmpty
		}
	}
</script>
<style scoped>
	header{
		width: 100%;
		height: 88px;
		background-image: url(~@/assets/images/headerBgImage.png);
		background-size: 100%;
		display: flex;
		position: fixed;
	}
	header div{
		width: 1px;
		flex-grow: 1;
		display: flex;
		align-items: center;
	}
	.left-container{
		justify-content: flex-start;
	}
	.left-container img{
		height: 36px;
		margin-left: 30px;
	}
	.center-container{
		justify-content: center;
		color: #fff;
		font-size: 36px;
	}
	.main{
		width: 100%;
		height: 1250px;	
		position: fixed;
		top: 88px;
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.modal{
		width: 580px;
		height: 910px;
		border-radius: 40px;
		background: #fff;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		margin-top: 44px;
		overflow: hidden;
	}
	.content{
		height: 710px;
		padding-top: 159px;
		box-sizing: border-box;
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.score{
		height: 168px;
		display: flex;
		align-items: baseline;
	}
	.empty,.unit{
		width: 1px;
		flex-grow: 1;
	}
	.number{
		font-size: 120px;
		line-height: 168px;
	}
	.unit{
		font-size: 28px;
	}
	.slogon{
		height: 50px;
		margin-top: 179px;
		font-size: 32px;
		color: #fff;
		text-align: center;
		text-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}
	.quote{
		height: 72px;
		margin-top: 30px;
		color: #fff;
		display: flex;
		text-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}
	.quote>div{
		display: flex;
	}
	.mark{
		width: 1px;
		flex-grow: 1;
		font-size: 72px;
		height: 120px;
		line-height: 120px;
	}
	.left{
		justify-content: flex-end;
	}
	.right{
		justify-content: flex-start;
	}
	.characters{
		font-size: 28px;
		width: 321px;
		justify-content: center;
		text-align: center;
	}
	.btn{
		width: 520px;
		height: 88px;
		background: rgba(74,161,255,1);
		color: #fff;
		font-size: 40px;
		text-align: center;
		line-height: 88px;
		border-radius: 8px;
		margin: 0 auto;
		margin-top: 56px;
	}

	.orange .main{
		background-image: url(~@/assets/images/share_back_orange.png);
	}
	.orange .modal{
		box-shadow: 0 10px 22px rgba(206,93,0,0.35);
	}
	.orange .content{
		background-image: url(~@/assets/images/share_front_orange.png);
	}
	.orange .score{
		color: rgba(240,158,54,1);
	}
</style>